import React, { createElement, FC } from 'react';
import { Col, Empty } from 'antd';
import { FormItem } from 'react-antd-formutil';
import Draggable from '../../../components/Draggable';
import { components, PickerItemData } from '../../Picker/config';

interface BlockProps {
    data: PickerItemData;
    onChoose?: any;
    [k: string]: any;
}

function Block({ data, onChoose, ...rest }: BlockProps) {
    const component = components[data.componentName] as FC;

    if (!component) {
        return null;
    }

    if (data.type === 'layout') {
        return (
            <Draggable
                options={{
                    group: {
                        name: 'shared',
                        put: (_, from) => {
                            if (from.el.classList.contains('panel-picker')) {
                                return false;
                            }

                            return true;
                        }
                    },
                    animation: 150,
                    onChoose,
                }}
                display={component}
                props={{ ...data.componentProps, ...rest }}>
                <div className="symbol">
                    <Empty />
                </div>
            </Draggable>
        );
    }

    if (data.type === 'form-item') {
        return (
            <Col {...rest} span={data.span}>
                <FormItem {...data.formProps}>{createElement(component, data.componentProps)}</FormItem>
            </Col>
        );
    }

    return null;
}

export default Block;
